
<script type="text/javascript">	
	{literal}	
	$(document).ready(function() {
		// default action	
		ajaxServiceFilter($('select#department'));
		
		// register event on department change			
		$('select#department').change(function() {				
			ajaxServiceFilter($(this));		
		});
		
		// register event on service change
		$('select#service').change(function() {
			ajaxRoomFilter($(this));
		});
		
		// register event on cancel button
		$('.cancel').click(function() {		
			loadPackagePage('pageContent', 'ListPackage', '');
		});	
		
		$('#next2step2').click(function() {
			next2Step2(true);
		});	
		$('#save_step1').click(function() {
			next2Step2(false);
		});		
		$('#back2step1').click(function() {
			$('#step2').hide('slow');
			$('#step1').show('fast');
		});	
		
		$('#add_service').click(function() {
			addService();
		});
		$('#add_test').click(function() {
			popUpATest();
		});
				
		$('#add_test_popup').click(function() {							
			addTest();
		});					
					
	});	
	{/literal}
	
	{literal}
	var cur_id = "add_service_item";
	var cur_td_id = "tdAddService";
	function toggleTab(id, tdId) {
		$("#" + cur_id).css("display", "none");
		$("#" + cur_td_id).css("border-bottom", "1px solid #DDD").css("background", "#FFF");
		$("#" + cur_td_id + " a").css('color', '#AAA');
		cur_id = id;
		cur_td_id = tdId;
		$("#" + id).css("display", "block");
		$("#" + tdId).css("border-bottom", "none").css("background", "#FBFBFB");
		$("#" + tdId + " a").css('color', 'green');
	}
	{/literal}

</script>

<br />
<input type="hidden" id="package_id" name="package_id" value="{$package->get_id()}">
<div id="step1" class="form_container" style="width: 760px;">
	<div>
		<span id="status_message" style="font-style: italic; color: red;"></span>
	</div>
	<table cellspacing="0" cellpadding="0">
		<tr>
			<td colspan="2" class="field" style="text-transform: uppercase">{translate}Service package detail{/translate}</td>
		</tr>
		<tr>
			<td class="label">{translate}Name{/translate}</td>
			<td colspan="3" class="field">
				<input id="package_name" type="text" size="57" value="{$package->getLocalizedText('name')}">
			</td>											 		
		</tr>
		<tr>
			<td class="label">{translate}Description{/translate}</td>	
			<td class="field">
				<textarea id="package_note" rows="2" cols="50" name="note">{$package->get('note')}</textarea>			
			</td>			
		</tr>
		<tr>
			<td colspan="2">
				<div align="right">
					<div>
						<a id="save_step1" class="button_link" href="#">{translate}Save{/translate}</a>
						<a id="next2step2" class="button_link" href="#">{translate}Next step{/translate}</a>				
						<a class="button_link cancel" href="#">{translate}Cancel{/translate}</a>
					</div>
				</div>
			</td>
		</tr>				
	</table>
	
	
</div>

<div id="step2" class="form_container" style="width: 760px; display: none;">
	<table cellpadding="0" cellspacing="0">
		<tr>
			<td colspan="2" class="field" style="text-transform: uppercase">{translate}List of services{/translate}</td>
		</tr>
		
		<tr>
			<td class="label">{translate}Service package name{/translate}</td>
			<td class="field" id="static_package_name"></td>											 		
		</tr>
		<tr>
			<td class="label">{translate}Description{/translate}</td>	
			<td class="field" id="static_package_note"></td>									
		</tr>		
	</table>	
	
	<table cellpadding="0" cellspacing="0" style="width: 700px">
	<tr>
		<td id='tdAddService' style='border-width: 1px 1px 0px 1px; border-color: #DDD; border-style: solid; padding: 5px'>
			<a style='text-decoration: none; font-weight: bold; color: green' 
			   href="javascript:toggleTab('add_service_item', 'tdAddService');">{translate}Add service{/translate}</a>
		</td>		
		<td id='tdAddTest' style='border-width: 1px 1px 1px 0px; border-color: #DDD; border-style: solid; background: #FFF; padding: 5px'>
			<a style='text-decoration: none; font-weight: bold; color: AAA'
			   href="javascript:toggleTab('add_test_item', 'tdAddTest');">{translate}Add test{/translate}</a>
		</td>
	</tr>
	<tr>
		<td colspan='3' style='border-width: 0px 1px 1px 1px; border-color: #DDD; border-style: solid;  padding: 5px'>
			<div id="add_service_item">
				<table class="grid" cellspacing="0" cellpadding="0" style="width: 680px;">				
					<tr>
						<th class="first">{translate}Department/Room{/translate}</th>
						<th>{translate}Service{/translate}</th>						
						<th>{translate}Executive place{/translate}</th>				
						<th class="last">&nbsp;</th>
					</tr>	
					
					<tr>
						<td class="first" style="width: 120px">
							{html_options id="department" name="department" options=$deptList}									
						</td>
						<td>
							<select id="service" style='width: 180px'>
								
							</select>
						</td>						
						<td>
							<select id="service_room" style="width: 200px;">
								
							</select>
						</td>			
						<td class="last">
							<input type="button" id="add_service" value="{translate}Add service_1{/translate}">				
						</td>
					</tr>
				</table>
			</div>
			
			<div id="add_test_item" style="display:none;">
			<table class="grid" cellspacing="0" cellpadding="0">	
				<tr>
					<th class="first">{translate}Select test{/translate}</th>
					<th class="last">&nbsp;</th>							
				</tr>
				<tr>
					<td class="first">
						{html_options id="test_service" name="test_service" options=$testList}																		
					</td>				
					<td class="last">
						<input type="button" id="add_test" value="{translate}Add test_1{/translate}">
					</td>			
				</tr>
			</table>	
		</div>

		</td>
	</tr>
	</table>
							

	<br />
	<div id="content_ticket_item">
		<table id="ticket_item" cellspacing="0" cellpadding="0" class="grid" width="600px">
			<thead>
				<tr>
					<th class="first" width="30px">{translate}Order number{/translate}</th>
					<th>{translate}Service{/translate}</th>
					<th>{translate}Room{/translate}</th>
					<th>{translate}Price{/translate}</th>										
					<th>{translate}Type{/translate}</th>
					<th class='last'>&nbsp;</th>						
				</tr>
			</thead>
			<tbody>
			</tbody>
		</table>			
	</div>
	
	<br />
	<div align="right" style="width: 600px;">
		<input id="back2step1" type="button" value="{translate}Back{/translate}"> 
							
		<div id="barLoading" style="display:none;">
			<img src="{$base_uri}images/ajax-loader.gif"/>
		</div>
	</div>
</div>

<div id="add_test_dialog" title="{translate}Select exact tests{/translate}" style="display:none;">	
</div>

<div id="test_detail_dialog" title="{translate}Test detail{/translate}"  style="display:none;">	
</div>

